<!DOCTYPE html>
<html>
<head>
    <title>Canvas - Drawing</title>
    <meta content="text/html" charset="UTF-8"/>
    <style type="text/css">
        * { margin: 0; padding: 0;}
        html, body {height: 100%; width: 100%}
        canvas { display: block;}
    </style>
</head>
<body>
    <div id="canvasDiv">
        <canvas id="canvas" height="600" width="800">
            你的浏览器不支持Canvas，请使用IE9+,Chrome3+,Safari3+,Opera10+,FireFox3+
        </canvas>
    </div>
    <div id="btnDiv">
        <button id="clearCanvasBtn">清空画布</button>
    </div>
<script type="text/javascript">

    if(window.addEventListener){
        window.addEventListener("load",function(){
            var c;
            var ctx;
            var started;
            var cBak;

            function init(){
                c = document.getElementById("canvas");
                ctx = c.getContext("2d");

                //window.addEventListener("resize",resizeCanvas,false);
                window.addEventListener("mousedown",canvasMouseHandle,false);
                window.addEventListener("mouseup",canvasMouseHandle,false);
                window.addEventListener("mousemove",canvasMouseHandle,false);
                //document.getElementById("clearCanvasBtn").onclick = clearCanvas;
                clearCanvasBtn.addEventListener("click",clearCanvas,false);

                c.width = window.innerWidth;
                c.height = window.innerHeight;
                //resizeCanvas();
            };

            function resizeCanvas(){
                cBak = c.toDataURL();
                var img = new Image();
                img.src = cBak;

                c.width = window.innerWidth;
                c.height = window.innerHeight;

                ctx.drawImage(img,0,0,c.width,c.height);
            }

            function canvasMouseHandle(ev){
                var x,y;
                if(ev.layerX || ev.layerX == 0){
                    x = ev.layerX;
                    y = ev.layerY;
                }
                if(ev.offsetX || ev.offsetX == 0){
                    x = ev.offsetX;
                    y = ev.offsetY;
                }
//console.log("x:y---------"+x+":"+y);
                switch(ev.type)
                {
                    case "mousedown":
                        started = false;
                        ctx.strokeStyle = "red";
                        ctx.beginPath();
                        ctx.moveTo(x,y);
                        started = true;
                        break;
                    case "mousemove":
                        if(started){
                            ctx.lineTo(x,y);
                            ctx.stroke();
                        }
                        break;
                    case "mouseup":
                        started = false;
                        break;
                }
            }

            function clearCanvas(){
                console.log("clearCanvas");
                ctx.clearRect(0,0,c.width,c.height);
            }

            init();
        },false);   //window
    }   //if
</script>
</body>
</html>